<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
    <script>
        const Son = {
            // 定义来自父组件的props
            props: ["count"],

            template: `<div>{{count}}</div>`,

            /* 组件实例被创建之前 */
            beforeCreate() {
                console.log("beforeCreate");
            },

            // 组件被创建
            created() {
                console.log("created");
            },

            /* 组件实例被挂载之前 */
            beforeMount() {
                console.log("beforeMount");
            },

            // 组件挂载完毕【高频】所有的视图已就绪，发起AJAX请求，渲染数据
            mounted() {
                console.log("mounted");
            },

            /* 更新之前 */
            beforeUpdate() {
                console.log("beforeUpdate");
            },

            // 更新完毕
            updated() {
                console.log("updated");
            },

            /* 卸载之前【高频】是否保存数据 */
            beforeUnmount() {
                console.log("beforeUnmount");
            },

            // 卸载完毕
            unmounted() {
                console.log("unmounted");
            },
        }

        Vue.createApp({
            template: `
            <son v-if="showSon" v-bind:count="count" />
            <button v-on:click="switchShowSon">显示/隐藏子组件</button>
            <button v-on:click="addCount">add</button>
            `,
            
            data() {
                return {
                    showSon: true,
                    count: 123
                }
            },

            /* 方法 */
            methods: {
                addCount() {
                    this.count++
                },
                switchShowSon() {
                    this.showSon = !this.showSon
                }
            },

            // 声明子组件
            components: {
                Son
            }
        }).mount("#app")
    </script>
</body>

</html>